import React, { Component } from "react";
import "./login.css";
import { logins } from "../data/api";
import { Toast } from "antd-mobile";
import { withRouter } from "react-router-dom";
class login extends Component {
  state = {
    username: "", //账号
    password: "", //密码
  };
  //返回上一步
  goToPrev = (params) => {
    this.props.history.go(-1);
  };
  //用户名
  userChange = (e) => {
    this.setState({
      username: e.target.value,
    });
  };
  //密码
  passwordChange = (e) => {
    this.setState({
      password: e.target.value,
    });
  };
  //删除账号内容
  deleteUsername = () => {
    this.setState({
      username: "",
    });
  };
  //删除密码内容
  deletePassword = () => {
    this.setState({
      password: "",
    });
  };
  //跳转到注册页面
  handleClickRe = () => {
    this.props.history.push("/register");
  };
  //登录
  handleLogin = async (params) => {
    let { username, password } = this.state;
    if (username === "" || password === "") {
      Toast.info("请认真填写信息", 1);
    } else {
      let res = await logins({ username, password });
      console.log(res);
      let user_id = res.wdata.oauth_token;
      let users = res.wdata.username;
      // let num_id = res.confing.data.username
      // console.log(user_id)
      if (res.msg === "登录成功") {
        Toast.info("登录成功!", 1, () => {
          localStorage.setItem("user_id", JSON.stringify(user_id));
          localStorage.setItem("user", JSON.stringify(users));
          this.props.history.push("user");
          // localStorage.setItem("num_id",JSON.stringify(num_id))
        });
      } else {
        Toast.info("账号或者密码有误", 1);
      }
    }
  };

  render() {
    let { username, password } = this.state;
    return (
      <div className="gwLoginPage">
        <div className="gwLoginNav">
          <div className="Nav-left">
            <i onClick={this.goToPrev} className="Nav-lefttodu">
              ←
            </i>
          </div>
          <div className="Nav-center">网易严选</div>
          <div className="Nav-right"></div>
        </div>
        <div className="gwLoginPageMain">
          <div className="logoWrap">
            <img
              className="logoImg"
              src="//yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png"
              alt=""
            />
          </div>
          <div className="MainAccount">
            <input
              type="text"
              value={username}
              onChange={this.userChange}
              placeholder="用户名/手机号"
            />
            {username === "" ? (
              ""
            ) : (
              <i
                onClick={this.deleteUsername}
                className="iconfont icon-cha"
              ></i>
            )}
          </div>
          <div className="MainPassword">
            <input
              type="password"
              value={password}
              onChange={this.passwordChange}
              placeholder="请输入密码"
            />
            {password === "" ? (
              ""
            ) : (
              <i
                onClick={this.deletePassword}
                className="iconfont icon-cha"
              ></i>
            )}
          </div>
          <div className="Loginbtn">
            <div className="MainLogin" onClick={this.handleLogin}>
              登录
            </div>
            <div className="Ipttxt">
              <input type="checkbox" defaultChecked={true} />
              {"\u00A0\u00A0\u00A0"}
              <strong>
                我同意<a href="#">《服务条款》</a>和<a href="#">《网易隐私政策》</a>
              </strong>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(login);
